<template>
  <view class="pageLayout">
    <view class="banner_box">
      <image
        v-if="userInfo.enterpriseID == 2"
        class="bg-image"
        src="https://www.yinyaoit.com/YY/heige_home_banner.jpg"
        mode="aspectFit"
      ></image>
      <image
        v-else
        class="bg-image"
        src="https://www.yinyaoit.com/YY/home_banner.png"
        mode="aspectFit"
      ></image>
    </view>
    <view class="tabs">
      <!-- <u-tabs :list="tabsList" @click="changeTabs"></u-tabs> -->
      <capsuleButton
        @change="resetSearch()"
        :list="tabsList"
        value-key="val"
        btn-title-name-key="name"
        v-model="listForm.customerClasseseRecordType"
        :loading="loading"
      ></capsuleButton>
    </view>
    <view class="list_box">
      <view
        class="list"
        v-for="item in listData"
        :key="item.recordID"
        @click="toDetail(item)"
      >
        <view class="item">
          <!--  -->
          <view class="hai" v-if="item.classeseType == 'Overseas'">海外</view>
          <view class="top">
            <view class="left">
              <view class="time">
                {{ formatTimestamp(item.startTime, "getHouseMin") }}—{{
                  formatTimestamp(item.endTime, "getHouseMin")
                }}
              </view>
              <!-- <view class="desc">预约时间内 请不要擅自离开工位</view> -->
              <view class="desc">
                <text class="bignum"
                  >共可预约{{ item.peopleNumber }}人，已预约{{
                    item.currentNumber
                  }}人</text
                >

                <view class="booked" v-if="item.IsVenue">已预约</view>
                <view
                  class="manchu"
                  v-if="item.peopleNumber == item.currentNumber"
                  >已满人</view
                >
              </view>
              <view class="progress">
                <view class="progress_text">热门度</view>
                <view class="progress_bar">
                  <u-line-progress
                    class="custom-progress"
                    :showText="false"
                    :percentage="
                      ((item.currentNumber / item.peopleNumber) * 100).toFixed(
                        0
                      )
                    "
                    height="8"
                  >
                  </u-line-progress>
                </view>
                <view class="progress_text"
                  >{{
                    ((item.currentNumber / item.peopleNumber) * 100).toFixed(0)
                  }}%</view
                >
              </view>
            </view>
            <view class="right">
              <view class="look_detail">
                <text class="detail_text">查看详情</text>
                <u-icon name="arrow-right" size="10"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view> </view>
    <!-- <bottomMenu :activityIndex="0"></bottomMenu> -->
    <mytoast ref="toastRef" />
  </view>
</template>

<script>
import store from "../../store/index";
import capsuleButton from "@/components/capsuleButton.vue";
import bottomMenu from "@/components/bottomMenu/index";
import { getClasseseRecordPageListApi } from "@/api/home/index";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    bottomMenu,
    mytoast,
    capsuleButton,
  },
  data() {
    return {
      tabsList: [
        {
          name: "今天场次",
          val: "ToDay",
        },
        {
          name: "明天场次",
          val: "Tomorrow",
        },
      ],
      listForm: {
        pageIndex: 1,
        pageSize: 10,
        customerClasseseRecordType: "ToDay",
      },
      totalPages: 0, //总页数
      listData: [],
      isMore: false,
      loading: false,
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  methods: {
    /**
     * 获取场次列表
     */
    getList(isClear=false) {
      console.log(this.userInfo, "userInfo");

      this.isMore = true;
      this.loading=true;
      getClasseseRecordPageListApi(this.listForm)
        .then((res) => {
          if (isClear) {
            this.listData=[];
          }
          let list = res.data.items.find(
            (item) =>
              item.customerClasseseRecordType ==
              this.listForm.customerClasseseRecordType
          ).listQueryCustomerClasseseRecordOutput;
          this.listData = [...this.listData, ...list];
          console.log(this.listData, "listData");
          this.totalPages = res.data.totalPages;
          console.log(this.totalPages, "totalPages");

          this.isMore = false;
          this.loading=false;
        })
        .catch((e) => {
          this.isMore = false;
          this.loading=false;
          let message;
          if (e.data && e.data.detail) {
            message = e.data.detail;
          } else {
            message = e.errorMsg;
          }
          this.$refs.toastRef.showToast({
            msg: message,
            duration: 1000,
            position: "center",
          });
        });
    },
    /**
     * 切换tabs
     */
    changeTabs(value) {
      console.log(value);
      this.listForm.customerClasseseRecordType = value.val;
      this.resetSearch();
    },
    /**
     * 清楚列表
     */
    clearList(){
      this.listForm.pageIndex = 1;
      this.getList(true);
    },
    /**
     * 重置分页
     */
    resetSearch() {
      this.listForm.pageIndex = 1;
      this.listData = [];
      this.getList();
    },
    /**
     * 跳转详情页
     */
    toDetail(item) {
      // console.log(item);

      // return
      uni.navigateTo({
        url: "/pages/home/detail?id=" + item.recordID,
      });
    },
  },
  onLoad() {
    // this.resetSearch();
  },
  onShow() {
    this.clearList();
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {
    if (this.isMore) {
      return;
    }
    if (this.listForm.pageIndex < this.totalPages) {
      this.listForm.pageIndex++;
      this.getList();
    }
  },
};
</script>
<style>
page {
  background-color: #f5f7fb;
}
</style>

<style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
  padding-bottom: 180rpx;
}

.banner_box {
  position: relative;
  width: 100%;
  height: 202rpx;

  .bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .title {
    position: relative; // 需要提升层级
    z-index: 1;
    /* 原有样式保持不变 */
  }
}

.list_box {
  margin-top: 10rpx;

  .list {
    margin-bottom: 20rpx;

    .item {
      width: 100%;
      // height: 180rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 40rpx;
      padding-left: 60rpx;
      border-radius: 6rpx;
      position: relative;
      .hai {
        position: absolute;
        background: linear-gradient(180deg, #cf574e 0%, #a22c26 100%);
        top: 10rpx;
        left: 15rpx;
        font-size: 20rpx;
        padding: 2rpx 10rpx;
        color: white;
        border-radius: 12rpx 0 12rpx 0;
        font-weight: bold;
      }

      .top {
        display: flex;
        justify-content: space-between;

        .left {
          flex: 1;
        }

        .time {
          font-size: 30rpx;
          color: #000000;
          font-weight: 500;
        }

        .desc {
          width: 100%;
          font-size: 24rpx;
          color: #1c1b2680;
          margin-top: 9rpx;

          .bignum {
            font-size: 24rpx;
            margin-right: 14rpx;
          }
        }

        .title {
          font-size: 38rpx;
          color: white;
        }
      }

      .right {
        .look_detail {
          display: flex;
          align-items: center;
          font-size: 20rpx;

          .detail_text {
            margin-right: 10rpx;
            color: #1c1b2680;
          }
        }
      }
    }
  }
}

.tabs {
  display: flex;
  justify-content: center;
  margin-top: 44rpx;
  margin-bottom: 40rpx;
}

.manchu {
  margin: 0 14rpx;
  display: inline-block;
  padding: 5rpx 10rpx;
  font-size: 20rpx;
  line-height: 20rpx;
  background: linear-gradient(180deg, #ffe104 0%, #ff7a01 100%);
  color: #fff;
  // width: 72rpx;
  // height: 24rpx;
  text-align: center;
  border-radius: 4rpx;
}

.booked {
  margin: 0 14rpx;
  margin-right: 0rpx;
  display: inline-block;
  padding: 5rpx 10rpx;
  font-size: 20rpx;
  line-height: 20rpx;
  color: #fff;
  background: linear-gradient(180deg, #cf574e 0%, #a22c26 100%);
  // width: 72rpx;
  // height: 24rpx;
  text-align: center;
  border-radius: 4rpx;
}

.progress {
  display: flex;
  align-content: center;
  margin-top: 10rpx;

  .progress_text {
    font-size: 20rpx;
    color: #a22c26;
    display: inline-block;
    margin-right: 10rpx;
  }

  .progress_bar {
    width: 210rpx;
    height: 8rpx;
    padding-top: 8rpx;
    margin-right: 10rpx;
  }

  ::v-deep .u-line-progress__line {
    background-color: transparent !important;
    background: linear-gradient(270deg, #eb2d40 0%, #fcc75f 100%) !important;
    z-index: 9999;
  }
}
</style>